<template>
	<view>
		<view class="header">
			<view class="order-status">
				<view class="status-icon">
					<block v-if="detail.state == 0 || detail.state == 4">
						<image class="image"
							src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/miniprogram/static/order/status/wait_deliver.png"
							mode="aspectFit"></image>
					</block>
					<block v-if="detail.state == 1">
						<image class="image"
							src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/miniprogram/static/order/status/received.png"
							mode="aspectFit"></image>
					</block>
					<block v-if="detail.state == 2">
						<image class="image"
							src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/miniprogram/static/order/status/close.png"
							mode="aspectFit"></image>
					</block>
				</view>
				<view class="status-text">
					<text v-if="detail.state == 0 || detail.state == 4">开票中</text>
					<text v-if="detail.state == 1">已开发票</text>
					<text v-if="detail.state == 2">发票已作废</text>
				</view>
			</view>
		</view>

		<view class="w100 detail_box">

			<view class="w100 mb20 order_box express_box">
				<view class="w100 order p10">
					<view class="fl f26">
						<text>发票类型</text>
					</view>
					<view class="fl ml30 red_text">
						<text class="red_text">电子普通发票</text>
					</view>
				</view>
				<view class="w100 order p10">
					<view class="fl f26">
						<text>发票抬头</text>
					</view>
					<view class="fl ml30 red_text">
						<text class="red_text">{{ detail.title }}</text>
					</view>
				</view>
				<view class="w100 order p10">
					<view class="fl f26">
						<text>公司税号</text>
					</view>
					<view class="fl ml30 red_text">
						<text class="red_text">{{ detail.tax_number }}</text>
					</view>
				</view>
				<view class="w100 order p10">
					<view class="fl f26">
						<text>联系邮箱</text>
					</view>
					<view class="fl ml30 red_text">
						<text class="red_text">{{ detail.email }}</text>
					</view>
				</view>
				<view class="w100 order p10">
					<view class="fl f26">
						<text>订单编号</text>
					</view>
					<view class="fl ml30 red_text">
						<text class="red_text">{{ detail.order_no }}</text>
					</view>
				</view>
				<view class="w100 order p10">
					<view class="fl f26">
						<text>开票金额</text>
					</view>
					<view class="fl ml30 red_text">
						<text class="red_text">{{ detail.amount }}</text>
					</view>
				</view>
				<view class="w100 order p10">
					<view class="fl f26">
						<text>开票时间</text>
					</view>
					<view class="fl ml30 red_text">
						<text
							class="red_text">{{ detail.invoicing_time == '0' ? '开票中' :  detail.invoicing_time }}</text>
					</view>
				</view>
			</view>


			<view class="w100 mb20 goods_list">
				<view class="w100 item">
					<image :src="detail.file_path" mode=""></image>
					<view class="fr item_msg">
						<view class="title">
							{{ detail.goods_name }}
						</view>
						<view class="props">
							{{ detail.goods_props && detail.goods_props.toString() }} ×{{ detail.total_num }}
						</view>
						<view class="w100 price">
							<view class="b_price">
								<text class="sub">￥</text><text>{{ detail.goods_price }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="w100 mb20 order_box">
				<view class="w100 order p10">
					<view class="w100 pay_price">

						<view class="b_price">
							<text class="s_text">实付款：</text> <text class="sub">￥</text><text
								class="orderPrice">{{ detail.pay_price }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="w100 h200"></view>
		</view>

		<view v-if="detail.state == 1">
			<view class="w100 goods_operate">
				<view class="btn-item onBtn" @click="downLoadPDF" v-if="detail.path">查看发票</view>
				<view class="btn-item onBtn" @click="sendMail">发送邮箱</view>
			</view>
		</view>

		<u-modal :show="show" @confirm="confirm" @cancel="cancel" ref="uModal" :showCancelButton='true'
			:content="content" :asyncClose="true"></u-modal>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		COMMON
	} from "@/utils/commom.js"
	import {
		order_invoice_detail,
		send_invoice
	} from "@/api/invoice.js"

	const order_invoice_id = ref(null);
	const detail = ref({});
	const show = ref(false);
	const content = ref('');

	onLoad((option) => {
		order_invoice_id.value = option.order_invoice_id;
		get_detail(order_invoice_id.value);
	})

	// 获取订单详情
	function get_detail(order_invoice_id) {
		order_invoice_detail(order_invoice_id).then(res => {
			let data = res.data;
			detail.value = data;
		})
	}


	// 发送邮箱
	function sendMail() {
		content.value = `确认发送到邮箱【${ detail.value.email }】吗？`
		show.value = true;
	}

	const cancel = (() => {
		show.value = false
	})

	function confirm() {
		send_invoice({
			order_invoice_id: order_invoice_id.value
		}).then(res => {
			COMMON.Toast(res.msg)
		})

	}

	// 查看发票
	function downLoadPDF() {
		wx.downloadFile({
			url: `${ detail.value.path }`,
			success(resinfo) {
				let path = resinfo.tempFilePath;
				wx.openDocument({
					filePath: path,
					fileType: 'pdf',
					showMenu: true
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/order.scss';

	.detail_box {
		margin: 0;
	}

	.pay_price {
		padding: 15rpx 0;

		.b_price {
			float: right;

			.orderPrice {
				font-size: 32rpx;
			}
		}
	}

	.goods_operate {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		background-color: #fff;
		border-top: 1px solid #ccc;
		padding: 20rpx 30rpx 50rpx 30rpx;

		.btn-item {
			width: 200rpx;
			font-size: 30rpx;
			line-height: 70rpx;
		}
	}
</style>